import React,{useState,useEffect} from 'react'
import { Dropdown, Menu, Space,message } from 'antd';
import { CaretDownOutlined  } from '@ant-design/icons';
import defaultAvatar from '../assets/default.jpg'
import '../components/Header.less'
import {useNavigate} from 'react-router-dom';
// const  username=localStorage.getItem('username')
// const avatar=localStorage.getItem('avatar')

export default function Header() {
    const navigate=useNavigate()
      //退出登陆
      const outLogin=()=>{
        localStorage.clear();
        message.success('退出成功');
        setTimeout(()=>{
            navigate('/login')
        },1500)
       
        }
    const menu = (
        <Menu className='myMeau'>
    
            <Menu.Item>修改资料</Menu.Item>
            <Menu.Divider></Menu.Divider>
            <Menu.Item onClick={outLogin}>登陆退出</Menu.Item>
       
        </Menu>
      );
      const[avatar,setAvatar]=useState(defaultAvatar)
      const[username,setusername]=useState('游客')
     useEffect(() => {
        let username1=localStorage.getItem('username')
        let setAvatar1=localStorage.getItem('avatar')
     if(username1){
        setusername(username1)
     }
     if(setAvatar1){
        setAvatar('http://47.93.114.103:6688/'+setAvatar1)
     }
       return () => {
         
       }
     }, [])
   
    
  return (
    <div><header>
        
    <div>首页</div>
    <div className="right">

    <Dropdown overlay={menu}>
<a onClick={(e) => e.preventDefault()} className='ant-dropdown-link'>
  <Space>
    <img src={avatar} alt="" className='avatar' />
  <span> {username}</span> 
    <CaretDownOutlined />
  </Space>
</a>
</Dropdown>
    </div>
</header></div>
  )
}
